<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-11 10:09:37
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 15:56:06
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\spuManage\spuInformation\index.vue
-->
<template>
  <div class="priceinquiry flex flex-col">
    <!-- 查询区 -->
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="skuForm" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="商品名称：">
          <pb-input v-model="skuForm.skuName" placeholder="请输入商品名称"></pb-input>
        </el-form-item>
        <el-form-item label="供应商名称：">
          <pb-select v-model="skuForm.supplierId" placeholder="请选择供应商" keys="supplierId" label="supplierName"
            :options="PurchaseList" :filterable="true" :filterMethod="filterMethod" />
          <!-- <pb-input v-model="skuForm.supplierName" placeholder="请输入供应商名称"></pb-input> -->
        </el-form-item>
        <el-form-item label="供应单位：">
          <pb-select v-model="skuForm.supplyTenantIdList" :multiple="true" placeholder="请选择供应商" keys="tenantId"
            label="tenantName" :options="kitchenList" @change="clickTenantIdFn" />
          <!-- <pb-check :list="matchList" @change="changeCheck($event)"></pb-check> -->
        </el-form-item>
      </el-form>
    </searchCard>

    <!-- 表格区 -->
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <div class="table-box flex">
            <div class="left-tree-box">
              <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" class="custom-tree " :treeData="skuTreeData"
                :defaultProps="treeProps"></pb-tree>
            </div>
            <div class="table-right ">
              <pb-table :column="priceinquiryColumn" :tableData="priceinquiryTableData" :bottomElement="['pb-page']"
                :indexWidth="60">
                <template #price="{ row }">
                  <pb-icon name="rise" v-if="row.price > row.lastIssuePrice" />
                  <pb-icon name="fall" size="1.2em" v-if="row.price < row.lastIssuePrice" />
                  {{ row.price }}
                </template>
                <template #supplyTenant="{ row }">
                  <div class=" flex justify-center ">
                    <el-popover placement="bottom" :width="200" trigger="hover" :content="row.supplyTenant">
                      <template #reference>
                        <div class="popContent pb-ellipsis">{{ row.supplyTenant }}</div>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </pb-table>
              <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
                @onChange="onPagesChange" :total="pages.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
    </div>


  </div>
</template>

<script setup lang="ts">
import { getSkuClassList } from "@/api/Sku"
import { GetNewestChaseSkuSupplyListApi, GetkitchenListApi, GetPurchaseListApi } from '@/api/Purchasing'
const SupplierList = ref([] as any)
const PurchaseList = ref([] as any)
const filterMethod = (query) => {
  if (query) {
    PurchaseList.value = SupplierList.value.filter((item) => {
      return item.supplierId?.toLowerCase().includes(query.toLowerCase()) || item.supplierName?.toLowerCase().includes(query.toLowerCase())
    })
  } else {
    PurchaseList.value = SupplierList.value
  }
}
const priceinquiryTableData = ref([]);
const kitchenList = ref([])
const clickTenantIdFn = (val: any) => {
  // console.log(val, '22')
}
const priceinquiryColumn = reactive([
  {
    key: "skuName",
    name: "商品名称",
  },
  {
    key: "skuClassName",
    name: "商品类型",
  },
  {
    key: "accountingUnitName",
    name: "计量单位",
  },

  {
    key: "specifications",
    name: "规格",
  },
  {
    slot: "price",
    // rise
    name: "非税价格(元)",
    align: "right",
  },
  {
    key: "lastIssuePrice",
    name: "上期价格(元)",
    align: "right",
  },
  {
    key: "unitWeight",
    name: "单位重量(kg)",
    align: "right",
  },
  {
    key: "orderQuantization",
    name: "订货取整",
    align: "right",
  },
  {
    key: 'smallOrderQuantity',
    name: '最小订货数量',
    align: "right",
  },
  {
    slot: "supplyTenant",
    name: "供应单位",
  },
  {
    key: 'supplierName',
    name: '供应商名称'
  }
]);

const formOrigin = () => ({
  // skuClassCode: "",
  supplierId: "",
  skuName: "",
  supplyTenantIdList: []
});
let skuForm = ref(formOrigin() as any);

const matchOrigin = () => [
  { label: "全部", val: "", checked: true },
  { label: "未匹配", val: 0, checked: false },
  { label: "已匹配", val: 1, checked: false },
];
const matchList = ref(matchOrigin());


const pageInit = () => ({
  currentPage: 1,
  pageSize: 15,
  total: 0,
});
const pages = ref(pageInit());

let skuTreeData = ref([] as any);
const treeProps = { children: "children", label: "skuClassName" };

const searchFn = () => {
  getNewestListFn();
};

const resetFn = () => {
  skuForm.value = formOrigin();
  matchList.value = matchOrigin();
  getNewestListFn();
};




const onPagesChange = () => {
  getNewestListFn();
};

// 选择节点
const nodeCode = ref("");
const nodeClick = (data) => {
  nodeCode.value = data.curNode.skuClassCode;
  getNewestListFn();
};


const showDishedINfo = (val) => {
  if (val) {
    let str = val.split('、').splice(0, 3).join(',')
    return str
  } else {
    return ''
  }
}
const getNewestListFn = () => {
  let { skuName, supplierId, supplyTenantIdList } = skuForm.value
  GetNewestChaseSkuSupplyListApi({
    "currentPage": pages.value.currentPage,
    "pageSize": pages.value.pageSize,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "skuClassCode": nodeCode.value,
    skuName,
    supplierId,
    supplyTenantIdList: supplyTenantIdList
  }).then(res => {
    priceinquiryTableData.value = res.data.records
    pages.value.total = res.data.total
  })
}
const treeH = ref(null);
onMounted(() => {
  getSkuClassList({
    "currentPage": 1,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "parentClassCode": ""
  }).then((res) => {
    skuTreeData.value = [
      {
        skuClassName: '全部',
        children: res.data.records
      }
    ];
    getNewestListFn()
    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");
      treeH.value = height[0].offsetHeight + "px";
    });
  });
  GetkitchenListApi().then(res => {
    // console.log(res)
    kitchenList.value = res.data
  })
  GetPurchaseListApi({ "pageSize": -1, }).then(res => {
    SupplierList.value = res.data.records
    PurchaseList.value = res.data.records
  })
});
</script>

<style lang="scss" scoped>
.priceinquiry {}

.popContent {
  width: 100%;
  overflow: hidden;
}

.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-box {
  flex: 1;

  .table-right {
    width: 84%;
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>